/**
 * Created by zhulingxiao on 2017/6/6.
 */
import React from 'react';

import { Modal, Input, Form } from 'antd';
const FormItem = Form.Item;

export default class MyModal extends React.Component{

  state = {

    data : this.props.data.modalData

  }

  hideModal = () => {

    this.props.data.closeModal();

  }

  changeVal = (e) => {

    switch(e.target.name){

      case 'title':

        this.setState({
          data:Object.assign({},this.state.data,{
            title:e.target.value
          })
        })

        break;

      case 'link':

        this.setState({
          data:Object.assign({},this.state.data,{
            link:e.target.value
          })
        })

        break;

      case 'index':

        this.setState({
          data:Object.assign({},this.state.data,{
            index:e.target.value
          })
        })

        break;

      case 'icon':

        this.setState({
          data:Object.assign({},this.state.data,{
            icon:e.target.value
          })
        })

        break;

      default:

        this.setState({
          data:Object.assign({},this.state.data,{
            qx:e.target.value
          })
        })

    }

  }

  sucModal = () => {

    this.props.update(this.state.data)

  }

  render(){

    return(

      <Modal
        title="修改菜单信息"
        visible={this.props.data.visible}
        onOk={this.sucModal}
        onCancel={this.hideModal}
        okText="确认"
        cancelText="取消"
      >
        <Form>

          <FormItem
            label="名称"
            hasFeedback
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 12 }}
          >
            <Input defaultValue={this.props.data.modalData.title} onChange={this.changeVal} name="title"/>
          </FormItem>

          {

            this.props.data.modalData.parentid &&

            <FormItem
              label="路由"
              hasFeedback
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 12 }}
            >
              <Input defaultValue={this.props.data.modalData.link} onChange={this.changeVal} name="link"/>
            </FormItem>

          }

          <FormItem
            label="排序"
            hasFeedback
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 12 }}
          >
            <Input type="number" defaultValue={this.props.data.modalData.index} onChange={this.changeVal} name="index"/>
          </FormItem>

          {

            !this.props.data.modalData.parentid &&

            <FormItem
              label="图标按钮"
              hasFeedback
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 12 }}
            >
              <Input defaultValue={this.props.data.modalData.icon} onChange={this.changeVal} name="icon"/>
            </FormItem>

          }

          {

            !this.props.data.modalData.parentid &&

            <FormItem
              label="权限"
              hasFeedback
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 12 }}
            >
              <Input type="number" defaultValue={this.props.data.modalData.qx} onChange={this.changeVal} min={0}/>
            </FormItem>

          }

        </Form>

      </Modal>

    )

  }

}
